<template>
  <ele-page>
    <base-search @search="reload"/>
    <ele-card :body-style="{ paddingTop: '8px' }">
      <!-- 表格 -->
      <ele-pro-table
        ref="tableRef"
        row-key="id"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        v-model:selections="selections"
        highlight-current-row
        cache-key="systemBaseTable"
        :loadOnCreated="false"
      >
        <template #toolbar>
          <el-button
            class="ele-btn-icon"
            :icon="PrinterOutlined"
            @click="printChecklist()">
            打印核对单
          </el-button>
          <el-button
            type="primary"
            class="ele-btn-icon"
            :icon="PrinterOutlined"
            @click="batchPrint()">
            批量打印
          </el-button>
          <el-button class="ele-btn-icon" :icon="Download" @click="exportData">
            导出
          </el-button>
        </template>
        <template #studentRecommendSubmit="{ row }">
          <el-tag size="small" type="primary" v-if="row.studentRecommendSubmit == '0'">已提交</el-tag>
          <el-tag size="small" type="danger" v-else>未提交</el-tag>
        </template>
        <template #counselorRecommendCheck="{ row }">
          <el-tag size="small" type="primary" v-if="row.counselorRecommendCheck == '0'">已审核</el-tag>
          <el-tag size="small" type="danger" v-else>未审核</el-tag>
        </template>
        <template #action="{ row }">
          <el-link type="success" :underline="false" @click="showRecommendInfoModal(row)">
            查看
          </el-link>
          <el-divider direction="vertical"/>
          <el-link type="danger" :underline="false" @click="showSinglePrintModal(row)">
            打印
          </el-link>
        </template>
      </ele-pro-table>
    </ele-card>
    <show-info v-model="showModal" v-if="showModal" :data="currentStudentCode"></show-info>
    <print-info-table v-model="singlePrintModalShow" v-if="singlePrintModalShow"
                      :data="currentStudentCode"></print-info-table>
    <batch-print-info-table v-model="batchPrintModalShow" v-if="batchPrintModalShow"
                            :data="selectCodes"></batch-print-info-table>

    <select-option-modal v-model="checkListModalShow" v-if="checkListModalShow">
    </select-option-modal>
  </ele-page>
</template>


<script setup>
import {ref} from 'vue';
import BaseSearch from "./components/search.vue";
import ShowInfo from "./components/show-info.vue";
import PrintInfoTable from './components/print-info-table.vue';
import BatchPrintInfoTable from './components/batch-print-info-table.vue';

import SelectOptionModal from './components/select-option-modal.vue';


import {Delete, Download, Plus, Upload} from "@element-plus/icons-vue";
import {PrinterOutlined} from 'ele-admin-plus/es/icons';
import {pageList, exportRecommendFillState} from '@/api/manage/recommend/admin/index.js';
import {EleMessage} from 'ele-admin-plus/es';
import {ElMessageBox} from 'element-plus';

/** 表格实例 */
const tableRef = ref(null);

/** 表格列配置 */
const columns = ref([
  {
    type: 'selection',
    columnKey: 'selection',
    width: 50,
    align: 'center',
    fixed: 'left'
  },
  {
    prop: 'code',
    label: '学号',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'name',
    label: '姓名',
    align: 'center',
    minWidth: 90
  },
  {
    prop: 'campus',
    label: '校区',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'organization',
    label: '总支',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'grade',
    label: '年级',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'major',
    label: '专业',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'studyState',
    label: '学籍状态',
    align: 'center',
    minWidth: 110
  },
  {
    prop: 'counsellorName',
    label: '辅导员',
    align: 'center',
    minWidth: 80
  },
  {
    prop: 'studentRecommendSubmit',
    label: '学生提交状态',
    minWidth: 110,
    align: 'center',
    slot: 'studentRecommendSubmit'
  },
  {
    prop: 'counselorRecommendCheck',
    label: '审核状态',
    width: 90,
    align: 'center',
    slot: 'counselorRecommendCheck'
  },
  {
    columnKey: 'action',
    label: '操作',
    width: 180,
    align: 'center',
    slot: 'action'
  }
]);

/** 表格选中数据 */
const selections = ref([]);

/** 表格数据源 */
const datasource = ({page, limit, where}) => {
  return pageList({...where, pageNum: page, pageSize: limit});
};

/** 搜索 */
const reload = (where) => {
  tableRef.value?.reload?.({page: 1, where});
};


const tempFun = (where) => {
  console.log("临时方法");
}


const currentStudentCode = ref(null);

//显示展示学生推荐表信息的modal
const showModal = ref(false);

//查看推荐表填写情况
const showRecommendInfoModal = (row) => {
  currentStudentCode.value = row.code;
  showModal.value = true;
}


const singlePrintModalShow = ref(false);
const showSinglePrintModal = (row) => {
  if (row.studentRecommendSubmit == '1') {
    EleMessage.warning('该学生还未填写推荐表信息采集');
    return;
  }
  if (row.counselorRecommendCheck == '1') {
    //当前学生还未被辅导员审核，给一条提示信息
    ElMessageBox.confirm(
      '当前学生还未审核，确认要打印该生推荐表吗？',
      '操作提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        currentStudentCode.value = row.code;
        singlePrintModalShow.value = true;
      })
      .catch(() => {
        //什么也不做
      });
  } else {
    currentStudentCode.value = row.code;
    singlePrintModalShow.value = true;
  }
}


const batchPrintModalShow = ref(false);


const showBatchPrintModal = () => {
  const rows = selections.value;//获取所有选择的项目
  if (!rows || rows.length == 0) {
    EleMessage.error('请至少选择一条数据');
    return;
  }
  let codes = [];
  for (let i = 0; i < rows.length; i++) {
    if (rows[i].studentRecommendSubmit == '0' && rows[i].counselorRecommendCheck == '0') {
      codes.push(rows[i].code);
    }
  }
  selectCodes.value = codes;
  batchPrintModalShow.value = true;
}


const selectCodes = ref([]);
const batchPrint = () => {
  //如果当前没有选择，那么提示一下
  const rows = selections.value;
  if (!rows || rows.length == 0) {
    EleMessage.error('请至少选择一条数据');
    return;
  }
  let codes = rows.map(item => {
    return item.code;
  });
  selectCodes.value = codes;
  batchPrintModalShow.value = true;
}


const checkListModalShow = ref(false);

/**
 * 批量打印核对单
 */
const printChecklist = () => {

  //TODO 弹出一个窗口，让用户标识
  checkListModalShow.value = true;
}


/** 导出数据 */
const exportData = () => {
  const loading = EleMessage.loading('请求中..');
  tableRef.value?.fetch?.(({where}) => {
    exportRecommendFillState(where)
      .then(() => {
        loading.close();
      })
      .catch((e) => {
        loading.close();
        EleMessage.error(e.message);
      });
  });
};


</script>
